<template>
	<view class="order" v-if="orderData">
		<!-- <view class="head bg-white margin-bottom-xs" v-if="($moment(orderData.last_pay_time).format('X')) - Date.parse(new Date()) / 1000 > 0 && orderData.status == 1">
			请在 <text>{{statetime}}</text> 内支付，逾期将自动取消订单
		</view> -->
		<view class="head bg-white margin-bottom-xs">
			{{stateText[orderData.status]}}
		</view>
		<!-- <view class="address bg-white flex justify-start align-center margin-bottom-xs">
			<text class="iconfont icon-dingxiang text-green"></text>
			<view class="text flex flex-direction">
				<text>{{orderData.address.name}} {{orderData.address.mobile}}</text>
				<text>{{orderData.address.formatted_address}} {{orderData.address.address}}</text>
			</view>
		</view> -->
		<view class="product bg-white margin-bottom-xs">
			<view class="goods">
				<image :src="$wanlshop.oss(orderData.product.image)" mode="aspectFill"></image>
				<view class="info">
					<view class="title">{{orderData.product.title}} </view>
					<view class="money">
						<text>实付款</text>
						<text>¥{{orderData.order_money}}</text>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="item"> <text>商品总价</text> <text>￥{{orderData.order_money}}</text> </view>
				<!-- <view class="item"> <text>优惠金额</text> <text>￥0.00</text> </view> -->
			</view>
		</view>





		<view class="info bg-white margin-bottom-xs">
			<view class="item"> <text>订单编号</text> <text>{{orderData.order_no}}</text> <text class="text-green"
					@tap="$wanlshop.copy(orderData.order_no)">复制</text></view>
			<view class="item"> <text>下单时间</text> <text>{{orderData.createtime_text}}</text> <text></text></view>
			<view class="item" v-if="orderData.paytime"> <text>支付时间</text> <text>{{orderData.paytime_text}}</text>
				<text></text></view>
		</view>

		<view class="safeAreaBottom"> </view>
		<view class="wanlian cu-bar tabbar solid-top foot text-df" v-if="orderData.status == 1">
			<view class="flex flex-direction align-center">
				<!-- <text class="iconfont icon-kefu1"></text>
				<text class="text-green">客服</text> -->
			</view>
			<view class="btn">
				<button v-if="orderData.status == 1" @tap="cancelOrder" class="cu-btn line-green  text-lg">
					取消订单 </button>
				<button v-if="orderData.status == 1 && t == 1"
					@tap="$wanlshop.to(`/pages/user/money/pay?type=${type}&id=${orderData.id}`)"
					class="cu-btn line-green  text-lg"> 立即支付 </button>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderData: null,
				timer: null,
				statetime: '',
				stateText: ['', '待支付', '待确认', '已确认', '已入住', '服务取消'],
				list: [],
				type: '', // 1：医护人员；2：陪诊人员；3：家政人员；4：司机；5：志愿者
				typeList: {
					domestic: 3,
					medicalvisit: 1,
					accompany: 2,
				},
				t: 1, // 1 用户  2 服务人员
				info: null
			};
		},
		onLoad(option) {
			this.t = option.t
			this.type = option.type
			this.loadData(option);
			// this.getApplyinfo(option)
			// this.getTimeSlot()
		},
		onHide() {
			clearInterval(this.timer);
			this.timer = null;
		},
		methods: {
			commentOrder(order) {
				let data = {
					image: order.servesinfo.image,
					title: order.servesinfo.title,
					sub_title: `${order.serves.price}/${order.serves.show_unit}*${order.serves.quantity}`,
					source_id: order.serves_id
				}
				this.$wanlshop.to(
					`/pages/user/record/comment?order_id=${order.id}&type=${this.type}&t=${this.t}&data=${encodeURIComponent(JSON.stringify(data))}`
					)
			},
			// 获取订单
			async loadData(data) {
				await uni.request({
					url: `/addons/nursing/api.order/detail`,
					method: "POST",
					data: {
						order_id: data.id
					},
					success: res => {
						if (res.data.serves_user_images) {
							res.data.serves_user_images = res.data.serves_user_images.split(',')
						} else {
							res.data.serves_user_images = []
						}
						console.log("rers", res)
						this.orderData = res.data;
					}
				});
			},
			getTime(last_pay_time) {
				var time = (this.$moment(last_pay_time).format('X')) - Date.parse(new Date()) / 1000;
				if (time == 0) {
					this.loadData(this.orderData.id)
					clearInterval(this.timer);
					this.timer = null;
					return false;
				}
				// 转换为式分秒
				let h = parseInt(time / 60 / 60 % 24)
				let m = parseInt(time / 60 % 60)
				m = m < 10 ? '0' + m : m
				let s = parseInt(time % 60)
				s = s < 10 ? '0' + s : s
				// 作为返回值返回
				this.statetime = `${h}时${m}分${s}秒`
			},
			
			async cancelOrder() {
				uni.showLoading({
					title: '请稍后'
				});
				// 获取列表
				await uni.request({
					url: `/nursing/order/cancel`,
					method: 'POST',
					data: {
						order_id: this.orderData.id
					},
					success: res => {
						this.loadData(this.orderData);
						uni.hideLoading();
						this.$wanlshop.msg('订单取消成功')
					}
				});
			},
			
			
		}
	};
</script>

<style lang="less">
	page {
		background-color: #ededed;
	}

	.order {
		.head {
			height: 72rpx;
			line-height: 72rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			color: #333333;
			text-align: center;

			text {
				color: #E31F1F;
			}
		}

		.address {
			min-height: 110rpx;
			padding-left: 50rpx;

			>text {
				font-size: 40rpx;
				margin-right: 38rpx;
			}

			.text {
				text {
					display: inline-block;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 40rpx;
				}
			}
		}
	}



	.wanlian,
	.safeAreaBottom {
		height: calc(128rpx + env(safe-area-inset-bottom)) !important;
	}

	.wanlian {
		justify-content: space-between !important;
		background-color: #fff !important;
		padding: 0 30rpx 0 34rpx !important;

		>view {
			text {
				display: inline-block;
				font-size: 20rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				color: #4CBD66;
				font-weight: 400;

				&:nth-child(1) {
					font-size: 40rpx;
					margin-top: 10rpx;
				}
			}
		}

		button {
			width: 212rpx;
			height: 72rpx;
			border-radius: 10rpx;
			margin-left: 16rpx;

			&:nth-child(1) {
				margin-left: 0;
			}
		}
	}

	.product {
		padding: 0 30rpx;

		.goods {
			padding: 26rpx 0;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border-bottom: 1rpx solid rgba(182, 182, 182, 0.5);

			image {
				width: 170rpx;
				height: 170rpx;
				border-radius: 6rpx;
				margin: 0 20rpx;
			}

			.info {
				width: calc(100% - 190rpx);

				.title {
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 44rpx;
				}

				.subtitle {
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #555555;
					line-height: 34rpx;
					margin-top: 8rpx;
				}

				.money {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					margin-top: 48rpx;

					text {
						display: inline-block;

						&:nth-child(1) {
							font-size: 20rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 400;
							color: #333333;
							line-height: 28rpx;
						}

						&:nth-child(2) {
							font-size: 36rpx;
							font-family: DIN-Bold, DIN;
							font-weight: bold;
							color: #E31F1F;
							line-height: 36rpx;
							margin-left: 8rpx;
						}
					}
				}
			}
		}

		.list {
			padding-bottom: 20rpx;

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;

				&:nth-child(1) {
					margin-top: 16rpx;
				}

				&:nth-child(2) {
					margin-top: 10rpx;
				}

				text {
					display: inline-block;

					&:nth-child(1) {
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #666666;
						line-height: 28rpx;
					}

					&:nth-child(2) {
						font-size: 24rpx;
						font-family: DIN-Bold, DIN;
						font-weight: bold;
						color: #666666;
						line-height: 30rpx;
					}
				}
			}
		}
	}

	.order {
		>.info {
			padding: 20rpx 30rpx;

			>image {
				width: 100rpx;
				height: 100rpx;
				margin-right: 20rpx;
			}

			.w {
				width: 170rpx;
			}

			.item {
				margin-bottom: 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&:last-child {
					margin-bottom: 0;
				}

				text {
					display: inline-block;

					&:nth-child(1) {
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #888888;
						line-height: 40rpx;
						margin-right: 36rpx;
					}

					&:nth-child(2) {
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 40rpx;
						flex: 1;
						text-align: left;
					}

					&:nth-child(3) {
						font-size: 28rpx;
					}
				}
			}
		}
	}

	.serves_user_images {
		image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 6rpx;
			margin-right: 16rpx;

			&:nth-child(4n) {
				margin-right: 0;
			}
		}
	}
</style>